<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link rel="stylesheet" href="{$oss}web/invitate_input_record/css/mui.min.css"/>
    <link rel="stylesheet" href="{$oss}web/invitate_input_record/css/mui.picker.min.css?v=1"/>
    <link rel="stylesheet" href="/static/vip/css/common.css?v=2020.09.02">
    <link rel="stylesheet" href="/static/invitate_input_record/css/invitate_input_record.css?v=2020.09.02"/>
    <style>
        .container {
            max-width: 75rem;
            margin: 0 auto;
        }

        .wrapper_content {
            margin-top: -8rem;
            padding-bottom: 8rem;
        }

        .form .item_con .title {
            width: auto;
        }

        .form .item_con .item_right_con {
            width: 61.9%;
        }

        .btn_ok {
            border-radius: 0.8rem;
            color: #FF839C;
        }

        .download-tips-area {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 5;
            background: #F5F5F5;
        }

        .download-tips-area .download-tips {
            width: 100%;
            margin: 0 auto;
            padding: 0.75rem 0;
            overflow: hidden;
            max-width: 75rem;
            position: relative;
        }

        .download-tips-area .download-tips .download-close {
            width: 1rem;
            height: 1rem;
            display: block;
            text-align: center;
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            cursor: pointer;
            background: #F5F5F5 url("/static/synastry/img/download-close.png") no-repeat;
            background-size: cover;
        }

        .download-tips-area .download-tips .download-logo {
            width: 2.7rem;
            height: 2.7rem;
            margin: 0 0.6rem 0 2.5rem;
            display: block;
            float: left;
            background: url("/static/synastry/img/download-logo.png") no-repeat;
            background-size: cover;
        }

        .download-tips-area .download-tips .download-title {
            font-size: 1.1rem;
            height: 1.35rem;
            line-height: 1.35rem;
            font-weight: bold;
            color: #333333;
        }

        .download-tips-area .download-tips .download-des {
            font-size: 1.1rem;
            height: 1.35rem;
            line-height: 1.35rem;
            font-weight: normal;
            color: #999999;
        }

        .download-tips-area .download-tips .download-btn {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            color: #ffffff;
            width: 7.9rem;
            height: 4.2rem;
            font-size: 1.45rem;
            font-weight: bold;
            line-height: 4.2rem;
            text-align: center;
            background: #FF6C89;
        }

        body {
            background: #f4f4f4;
        }
    </style>
</head>
<body>
<div class="container">
    <!--顶部图片-->
    <img class="header_img" src="/static/synastry/img/header_bg.png">
    <div id="tab-2" class="wrapper_content">
        <!--输入内容部分-->
        <div class="content_container">
            <img class="user_img" src="{$record.avatar}">
            <form action="##" onsubmit="return false" class="form" method="post" id="form">
                <div class="item_con">
                    <div class="title">昵称</div>
                    <div class="item_right_con">
                        <input class="input_con" type="text" id="name" name="name" value="{$record.name}" autocomplete="off">
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">性别选择</div>
                    <div class="sex_con">
                        <div id="sex_male" class="sex" onclick="actionSex(1)">男</div>
                        <div id="sex_female" class="sex sex_last sex_selected" onclick="actionSex(2)">女</div>
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">出生时间(公历)</div>
                    <div class="item_right_con">
                        <input class="input_con" id="timeResult"
                               data-options="{&quot;value&quot;:&quot;{$record.year.'-'.$record.month.'-'.$record.day.' '.$record.hour.':'.$record.minute}&quot;,&quot;beginYear&quot;:1900,&quot;endYear&quot;:2099}"
                               name="birth_time" placeholder="出生时间（公历）" type="text"
                               value="{$record.year.'-'.$record.month.'-'.$record.day.' '.$record.hour.':'.$record.minute}"
                               readonly="true" unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">出生地点</div>
                    <div class="item_right_con" id='showCityPickerBirth'>
                        <input class="input_con" id='cityResultBirth' type="text" name="birth_place" placeholder=""
                               value="{$record.birth_country.'-'.$record.birth_province.'-'.$record.birth_city}" readonly="true"
                               unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>

                <div class="item_con item_con_without_boder_bottom">
                    <div class="title">现居城市</div>
                    <div class="item_right_con" id='showCityPickerNow'>
                        <input class="input_con" id='cityResultNow' type="text" name="live_place" placeholder=""
                               value="{$record.live_country.'-'.$record.live_province.'-'.$record.live_city}" readonly="true"
                               unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>
                <input type="hidden" id="avatar" name="avatar" value="{$record.avatar}">
                <input type="hidden" id="sex" name="sex" value="{$record.type}">
                <input type="hidden" id="year" name="year" value="{$record.year}">
                <input type="hidden" id="month" name="month" value="{$record.month}">
                <input type="hidden" id="day" name="day" value="{$record.day}">
                <input type="hidden" id="hour" name="hour" value="{$record.hour}">
                <input type="hidden" id="minute" name="minute" value="{$record.minute}">
                <input type="hidden" id="birth_country" name="birth_country" value="{$record.birth_country}">
                <input type="hidden" id="birth_province" name="birth_province" value="{$record.birth_province}">
                <input type="hidden" id="birth_city" name="birth_city" value="{$record.birth_city}">
                <input type="hidden" id="live_country" name="live_country" value="{$record.live_country}">
                <input type="hidden" id="live_province" name="live_province" value="{$record.live_province}">
                <input type="hidden" id="live_city" name="live_city" value="{$record.live_city}">
                <input type="hidden" id="long_deg" name="long_deg" value="{$record.long_deg}">
                <input type="hidden" id="long_min" name="long_min" value="{$record.long_min}">
                <input type="hidden" id="ew" name="ew" value="{$record.ew}">
                <input type="hidden" id="lat_deg" name="lat_deg" value="{$record.lat_deg}">
                <input type="hidden" id="lat_min" name="lat_min" value="{$record.lat_min}">
                <input type="hidden" id="ns" name="ns" value="{$record.ns}">
            </form>
        </div>
        <div class="input_hint">您的个人信息会严格保密 仅作为合盘的依据</div>
        <div class="btn_ok" onclick="checkForm()">完成</div>
    </div>
    <div class="download-tips-area">
        <div class="download-tips">
            <div class="download-close"></div>
            <div class="download-logo"></div>
            <div>
                <div class="download-title">准了APP</div>
                <div class="download-des">前往“准了APP”查看更多星座知识</div>
            </div>
            <a href="https://at.umtrack.com/onelink/H9b4bi" class="download-btn">
                打开APP
            </a>
        </div>
    </div>
</div>
<div id="shadow" class="shadow"></div>
<div id="loading">
    <img src="{$oss}web/invitate_input_record/images/loading.gif" alt="">
</div>
<script src="/static/jquery-3.1.1.min.js"></script>
<script src="{$oss}web/invitate_input_record/js/mui.min.js"></script>
<script src="{$oss}web/invitate_input_record/js/city.data-xzns.js"></script>
<script src="{$oss}web/invitate_input_record/js/mui.picker.min.js?v=1"></script>
<script src="{$oss}web/invitate_input_record/js/mui.poppicker.js"></script>
<script>
    var is_user_have_record = 1;
    var record = JSON.parse('{:json_encode($record)}');
    var localRecord = JSON.parse(localStorage.getItem("localRecord"));

    if (localRecord !== null) {
        // 本地记录覆盖服务器默认值
        record = localRecord;
        // console.log('localRecord=', localRecord);
        // console.log('record=', record);
        // 准备初始化本地存储的档案信息到表单中
        $("#timeResult").val(record.birth_time).attr('data-options', "{\"value\": \"" + record.birth_time + "\", \"beginYear\": 1900, \"endYear\": 2099}");
        $('#cityResultBirth').val(record.birth_place)
        $('#cityResultNow').val(record.live_place)
        $("#name").val(record.name)
        $("#avatar").val(record.avatar)
        $("#sex").val(record.sex)
        $("#year").val(record.year)
        $("#month").val(record.month)
        $("#day").val(record.day)
        $("#hour").val(record.hour)
        $("#minute").val(record.minute)
        $("#birth_country").val(record.birth_country)
        $("#birth_province").val(record.birth_province)
        $("#birth_city").val(record.birth_city)
        $("#live_country").val(record.live_country)
        $("#live_province").val(record.live_province)
        $("#live_city").val(record.live_city)
        $("#long_deg").val(record.long_deg)
        $("#long_min").val(record.long_min)
        $("#ew").val(record.ew)
        $("#lat_deg").val(record.lat_deg)
        $("#lat_min").val(record.lat_min)
        $("#ns").val(record.ns)

        var sex_male = $('#sex_male')[0], sex_female = $('#sex_female')[0], sex_element = $('#sex')[0];

        sex_element.value = record.sex;
        //先设置为未选中状态
        sex_male.className = 'sex';
        sex_female.className = 'sex sex_last';
        if (1 == record.sex) {
            sex_male.className += ' sex_selected';
        } else {
            sex_female.className += ' sex_selected';
        }
    } else {
        console.log("localRecord=null");
    }
</script>

<script src="/static/invitate_input_record/js/time.place.js"></script>

<script>
    //表单提交
    function checkForm() {
        var form = document.getElementById('form'),
            avatar = form.avatar.value,
            name = form.name.value,
            sex = form.sex.value,
            year = form.year.value,
            birth_city = form.birth_city.value;
        if (!name.trim()) {
            alert("请填写昵称");
            return false;
        }
        if (!sex.trim()) {
            alert("请选择性别");
            return false;
        }
        // if (!avatar.trim()) {
        //     alert("请上传头像");
        //     return false;
        // }

        if (!year.trim()) {
            alert("请填写出生时间");
            return false;
        }
        if (!birth_city.trim()) {
            alert("请填写出生地点");
            return false;
        }

        document.getElementById('shadow').style.display = 'block';
        document.getElementById('loading').style.display = 'block';

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{:url('getDetailsUrl')}",
            data: $('#form').serialize(),
            success: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                if (result.code === 200) {
                    var formArr = $('#form').serializeArray(), data = {};
                    // 将表单数据写入本地存储
                    for (var i in formArr) {
                        data[formArr[i]['name']] = formArr[i]['value'];
                    }
                    localStorage.setItem("localRecord", JSON.stringify(data));
                    window.location = result.data.url;
                    return false;
                } else {
                    alert(result.msg);
                }
            },
            error: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                alert(result.msg);
            }
        });
        return false;
    }

    //选择性别事件
    function actionSex(sex) {
        var sex_male = $('#sex_male')[0], sex_female = $('#sex_female')[0], sex_element = $('#sex')[0];

        sex_element.value = sex;
        //先设置为未选中状态
        sex_male.className = 'sex';
        sex_female.className = 'sex sex_last';
        if (1 == sex) {
            sex_male.className += ' sex_selected';
        } else {
            sex_female.className += ' sex_selected';
        }
    }

    $('.download-tips-area .download-close').click(function () {
        $(this).parent().parent().hide();
        return false;
    })
</script>

{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279238006&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</body>
</html>
